<template>
  <div class="pagination">
    <div class="pagination-select">
      <el-select
        size="small"
        placeholder="Select"
        style="width: 140px"
        @change="limitChange"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
    <el-pagination
      size="small"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="limit"
      :current-page="page"
      @change="paginationChange"
      @prev-click="paginationPrev"
      @next-click="paginationNext"
    />
  </div>
</template>
<script setup>
defineProps(["total", "limit", "page"]);
const VueEmits = defineEmits(["paginationChange","limitChange"]);
const options = [
  {
    value: 10,
    label: "10条/页",
  },
  {
    value: 20,
    label: "20条/页",
  },
  {
    value: 30,
    label: "30条/页",
  },
  {
    value: 40,
    label: "40条/页",
  },
  {
    value: 50,
    label: "50条/页",
  },
];
function limitChange(e){
  limitChange(e)
}

function paginationChange(e) {
  VueEmits("paginationChange", e);
}
function paginationPrev(e) {
  VueEmits("paginationChange", e);
}
function paginationNext(e) {
  VueEmits("paginationChange", e);
}
</script>

<style>
.pagination {
  display: flex;
  padding: 15px 0px;
  box-sizing: border-box;
  background: white;
  margin-top: 15px;
  padding-top: 0px;
  padding-bottom: 0px;
  justify-content: space-between;
}
.pagination-select {
  max-width: 120px;
}
</style>